
import axios from "axios";
//1.引入Vue
import Vue from "vue";
//2.引入Vuex
import Vuex from "vuex"
//3.使用Vuex(Vuex本质是一个插件)
Vue.use(Vuex)

//配置state对象
const state = {
  msg: "Vuex",
  num: 1,
  movieList: []
}

//配置mutations对象
const mutations = {
  //修改state的状态唯一的方法就是提交mutations,且必须是同步函数(因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的)
  changeMsg(state) {
    state.msg = "hello Vuex"
  },
  addNNum(state, n) {
    state.num += n
  },
  getMovieList(state, movieList) {
    state.movieList = movieList
  }
}

//配置actions
const actions = {
  /* 
    Action 类似于 mutation，不同在于：
    -Action 提交的是 mutation，而不是直接变更状态。
    -Action 可以包含任意异步操作。
    -Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
    我们可以直接结构拿到commit进行调用
  */
  async getMovieList({ commit }) {
    const result = await axios.get("https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a")

    commit("getMovieList", result.data.data.list)
  }
}

//配置getters
const getters = {
  // 有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数等等 需要计算，我们就用到了getters 类似于vue中的计算属性
  // getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
  // 因为数据是state派生出来的，所以getters中的函数接收一个参数是state
  movieScore(state) {
    return state.movieList.filter(item => {
      return item.score <= 7
    })
  },
  movieTimes(state) {
    //如果计算属性在计算的时候，需要接收参数，则getters函数需要返回一个函数
    return ({ start, over }) => {
      return state.movieList.filter(item => {
        return parseInt(item.duration) >= start && parseInt(item.duration) <= over
      })
    }
  }
}


//4.创建一个store(vuex的实例),参数是一个配置对象,在配置对象中可以配置actions,mutations,state,getters等等
//暴露出去供Vue实例的配置项挂载
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})
